
<style lang="scss" scoped>
.scroll {
  height: 100%;
  overflow: hidden;
}
.header {
}

.container {
  position: fixed;
  width: 100%;
  top: 60px;
  bottom: 0;
  background: #f0f0f0;
  border-top: 1px solid #e5e5e5;
  ul {
    width: 100%;
    height: auto;
    padding: 0 10px 50px;
    li.item {
      width: 100%;
      min-height: 100px;
      background: #fff;
      padding: 10px;
      margin-top: 10px;
      img {
        width: 84px;
        height: 84px;
        display: inline-block;
        margin-left: 10px;
      }
    }
  }
  .pro-info {
    margin-left: 10px;
  }
  .item-count {
    width: 100%;
    height: 25px;
    position: relative;
    margin-top: 5px;
  }

  .hidden {
    display: none;
  }

  .item-count > span {
    font-size: 16px;
    color: rgba(255, 155, 175, 1);
  }

  .item-hand {
    position: relative;
  }

  .item-hand__bg {
    background: rgba(255, 137, 156, 1);
    opacity: 0.2;
    width: 75px;
    height: 20px;
    z-index: 10;
    border-radius: 10px;
  }

  .item-hand__it {
    position: absolute;
    right: 0px;
    height: 20px;
    width: 71px;
    top: 0px;
  }

  .item-hand__it i {
    width: 22px;
    height: 22px;
    display: inline-block;
    vertical-align: middle;
  }

  .item-hand__it i.add {
    background: url("/static/ethel_img/shop/but_plus_usable@2x.png") center
      center no-repeat;
    background-size: 100% 100%;
    vertical-align: middle;
  }

  .item-hand__it input {
    outline: none;
    border: none;
    width: 100%;
    height: 100%;
    font-size: 12px;
    text-align: center;
  }

  .item-hand__it i.dect {
    background: url("/static/ethel_img/shop/but_subtract_usable@2x.png") center
      center no-repeat;
    background-size: 100% 100%;
    vertical-align: middle;
    margin-left: -4px;
  }
}
nav {
  height: 42px;
  background: #fff;
  div {
    font-size: 14px;
    text-align: center;
    height: 42px;
    line-height: 42px;
    color: #999;
  }
}
.order-con {
  padding: 12px;
  .item {
    padding: 12px;
    background: #fff;
    .pro {
      width: 100%;
      height: auto;
      .sum {
        margin-left: 12px;
      }
      .sum > p {
        font-size: 12px;
        line-height: 18px;
      }
      .number {
        width: 100%;
        height: 30px;
        line-height: 30px;
        color: rgba(241, 160, 176, 1);
        position: relative;
        > font {
          position: absolute;
          right: 0px;
          font-size: 10px;
          color: rgba(159, 154, 155, 1);
        }
      }
    }
    .pro-total {
      height: 40px;
      line-height: 40px;
      text-align: right;
      font-size: 12px;
    }
    .pro-btn {
      width: 100%;
      height: 60px;
      line-height: 60px;
      text-align: right;
    }
  }
  .number > span.integral::before {
    content: "";
    width: 20px;
    height: 20px;
    display: inline-block;
    background: url("/static/ethel_img/order_icon_integral.png") center center
      no-repeat;
    background-size: 100% 100%;
    vertical-align: middle;
  }
}
.notMore {
  width: 100%;
  height: 100%;
  padding-top: 70px;
  span {
    font-size: 13px;
    color: rgba(160, 154, 155, 1);
    margin-top: 15px;
  }
  img {
    width: 140px;
    height: 85px;
    display: block;
  }
}
.mypostages{
  font-size: .34rem;
  color: #888;
}
</style>

<template>
  <div class="withdrawal">
    <ComHeader title="我的订单" leftArrow="true"/>
    <div class="container">
      <nav class="flex-display">
        <div
          class="flex-num-one"
          v-for="(item, index) in navList"
          :key="index"
          :class="{'select_border__b':item.select}"
          @click="fnSelectStatus(item)"
        >{{item.name}}</div>
      </nav>
      <scroll
        class="scroll"
        :data="drawalList"
        :pullup="isPullup"
        @scrollToEnd="searchMore"
        v-if="drawalList && drawalList.length"
        ref="suggest"
      >
        <ul class="order-con">
          <li class="item" v-for="(item, index) in drawalList" :key="index">
            <div class="pro flex-display" @click="fnOpenOrderDetail(item)">
              <img :src="item.photo">
              <div class="sum flex-display flex-num-one flex-display-column">
                <p class="text-overflow-2">{{item.describe}}</p>
                <div class="number flex-display flex-center-align">
                  <span
                    :class="{'integral':item.goodsrebate[0].pay_type == '积分'}"
                  >{{item.goodsrebate[0].pay_type == '积分' ? '' : '￥'}}{{item.discount_price}}</span>

                  <font>X{{item.buy_count}}</font>

                </div>
                <div class="mypostages">
                  <span>邮费：￥{{ item.mypostages }}</span>
                </div>
              </div>
            </div>
            <div class="pro-total" @click="fnOpenOrderDetail(item)">
              共{{item.buy_count}}件商品 合计：
              <span class="wraper-party__color">
                {{item.goodsrebate[0].pay_type == '积分' ? '' : '￥'}}
                {{ item.mypayment_amount }}
                {{item.goodsrebate[0].pay_type == '积分' ? '积分' : ''}}
              </span>
            </div>
            <div class="pro-btn">
              <button
                class="theme-hollow__btn"
                @click.stop.prevent="fnHandleStatus(item.status, item.order_no, item.tracking_number, item.photo,item)"
              >{{(item.status == '待支付' || item.status == '待发货') ? '取消订单' : '查看物流'}}</button>
              <button
              v-if="item.status !='已完成'"
                class="theme-solid__btn"
                @click.stop.prevent="fnHandlePay(item)"
              >{{item.status == '待支付' ? '支付' : item.status == '待发货' ? '联系客服': item.status == '待收货' ? "确认收货": '评价'}}</button>
            </div>
          </li>
        </ul>
      </scroll>
      <div
        class="notMore flex-display flex-display-column flex-center-align"
        v-if="isLoading && !drawalList.length"
      >
        <img src="/static/ethel_img/shopping_img_em.png">
        <span>订单空空如也！！</span>
      </div>
    </div>
  </div>
</template>
<script>
import api from "@/fetch/api";
import ComHeader from "@/common/ComHeader";
import Scroll from "@/base/scroll/scroll";
import Loading from "@/base/loading/loading";
import axios from "axios";
import { Toast, MessageBox, Indicator } from "mint-ui";
export default {
  data() {
    return {
      isHasMore: true, // 是否需要上拉加载
      drawalList: [], // 列表数据
      isPullup: true, // 是否需要监听下拉加载
      status: "all", // 订单状态
      isNext: "", // 是否有下一页
      isLoading: false,
      navList: [
        { name: "全部", select: true, status: "all" },
        { name: "待付款", select: false, status: 0 },
        { name: "待发货", select: false, status: 1 },
        { name: "待收货", select: false, status: 2 },
        { name: "待评价", select: false, status: 3 }
      ]
    };
  },
  created() {
    console.log(this.$route);
    console.warn("参数");
    this.initNav(this.$route.query.status);
    this.userInfo = this.getlocalStorage(this.companyUnique);
    // 获取订单列表的状态
    this.status = this.$route.query.status;
    // 获取数据
    this.getOrderList();
  },
  methods: {
    /**
     * @desc 点击跳转到订单详情页面
     * @params {Object}  item 订单当前对象
     */
    fnOpenOrderDetail(item) {
      let params = {
        is_detail: "yes",
        order_no: item.order_no,
        uid: this.userInfo.id
      };
      this.$router.push({
        path: "NewOrderDetail",
        query: params
      });
    },

    /**
     * @desc 处理支付 查看物流
     * @param {String} _status  订单状态
     * @params {Object}  item 订单编号
     */
    fnHandlePay(item) {
      if(item.status == '待发货') {
        Toast('请联系微信客服')
        return
      }
      item.status == "待支付" && this.fnOpenNewPay(item);
      item.status == "待收货" && this.fnSuregetgoods(item);
      item.status == '待评价' && this.fnOpenEvaluation(item)
    },

    /**
     * @desc 打开发布评价页面
     * @params {Object}  item 订单对象
     */
    fnOpenEvaluation(item) {
      this.$router.push({
        path: 'NewEvaluation',
        query: {
          order_no: item.order_no,
          photo: item.photo
        }
      })
    },

    /**
     * @desc 处理收货
     * @params {Object}  item 订单对象
     */
    fnSuregetgoods(item) {
      let _this = this;
      MessageBox.confirm("确定收货?").then(action => {
        let params = {
          order_code: item.order_no,
          uid: this.userInfo.id
        };
        Indicator.open({
          text: "加载中...",
          spinnerType: "fading-circle"
        });
        api
          .suregetgoods(params)
          .catch(res => {
            console.log(res);
            Indicator.close()
            if (res.status == 200 && !res.data.code) {
              Toast({
                message: "确定收货成功",
                position: "middle",
                duration: 2000
              });
              _this.status = 3;
              _this.isNext = '';
              _this.drawalList = [];
              _this.getOrderList();
              _this.initNav(_this.status)

            }
          })
          .then(err => {
            Indicator.close()
          });
      });
    },

    /**
     * @desc 处理支付
     * @params {Object}  item 订单对象
     */
    fnOpenNewPay(item) {
      let params = {
        total: parseFloat(item.mypayment_amount).toFixed(2),
        order_no: [item.orderId],
        uid: this.userInfo.id
      };
      window.localStorage.setItem(
        "pay_type",
        item.goodsrebate[0].pay_type == "微信" ? 1 : 2
      );
      this.$router.push({
        name: "NewPay",
        params: params
      });
    },
    /**
     * @desc 初始化导航
     * @param {String} _status  订单类型
     */
    initNav(_status) {
      this.navList.forEach(item => {
        item.select = item.status == _status ? true : false;
      });
    },
    /**
     * @desc 操作按钮的各种情况
     * @param {String} _name  '待支付' '待发货'
     * @param {String}  order_no 订单编号
     */
    fnHandleStatus(_name, order_no, tracking_number, _photo, _item) {
      _name == "待支付" && this.fnCancelOrder(order_no);
      _name == "待发货" && this.fnCancelOrder(order_no);
      (_name == '待收货' || _name == '待评价' || _name == '已完成') && this.fnOpenLogistics(tracking_number, _photo, _item);
    },

    /**
     * @desc 查看物流
     * @param {String} tracking_number  快递单号
     * @param {String}  _photo 图片地址
     */
    fnOpenLogistics(tracking_number, _photo, _item) {
      this.$router.push({
        path: 'NewLogistics',
        query: {
          number: tracking_number,
          photo: _photo,
          tracking_number: _item.tracking_number,
          logistics_company_code: _item.logistics_company_code
        }
      })
    },

    /**
     * @desc 取消订单支付
     * @param {String}  order_no 订单编号
     */
    fnCancelOrder(order_no) {
      let _this = this;
      MessageBox.confirm("确定取消该订单?").then(action => {
        let params = {
          order_no: order_no,
          uid: this.userInfo.id
        };
        api
          .cancelorder(params)
          .catch(res => {
            console.log(res);
            if (res.status == 200 && !res.data.code) {
              Toast({
                message: "取消订单成功",
                position: "middle",
                duration: 2000
              });
              _this.drawalList.forEach((item, index) => {
                if (item.order_no == order_no) {
                  _this.drawalList.splice(index, 1);
                }
              });
            }else{
              Toast({
                message: res.data.msg,
                position: "middle",
                duration: 2000
              });
            }
          })
          .then(err => {});
      });
    },
    /**
     * @desc 选择订单类型
     * @param {Object} _item 订单类型对象
     */
    fnSelectStatus(_item) {
      this.navList.forEach(item => {
        item.select = false;
      });
      _item.select = true;
      this.drawalList = [];
      this.status = _item.status;
      this.isNext = "";

      this.getOrderList();
    },
    getOrderList() {
      Indicator.open({
        text: "加载中...",
        spinnerType: "fading-circle"
      });
      let params = {
        status: this.status,
        uid: this.userInfo.id
      };
      api
        .getorderstatus(params, this.isNext ? this.isNext : "")
        .catch(res => {
          console.log(res);
          Indicator.close();
          this.isLoading = true;
          if (res.status == 200) {
            this.isNext = res.data.next;
            if (res.data.data && res.data.data.length) {
              let _list = [];
              res.data.data.forEach(item => {
                let params = {};
                console.log(item.order_no);
                item.goods_type.forEach(cel => {
                  params = Object.assign(cel, {
                    orderId: item.id,
                    order_no: item.order_no,
                    status: item.status,
                    tracking_number: item.tracking_number,
                    logistics_company_code: item.logistics_company_code,
                    mypostages: item.postage,
                    mypayment_amount: item.payment_amount,
                  });
                  _list.push(params);
                });
              });
              this.drawalList = [...this.drawalList, ..._list];
            }
            console.log(this.drawalList);
          }
        })
        .then(err => {
          Indicator.close();
        });
    },
    /**
     * @desc 是否需要下拉加载
     */
    searchMore() {
      if (this.isNext) {
        this.getOrderList();
        return;
      }
      Toast({
        message: "我是有底线的",
        position: "middle",
        duration: 2000
      });
    }
  },
  components: {
    Scroll,
    ComHeader,
    Loading,
    Toast,
    MessageBox,
    Indicator
  }
};
</script>
